<template>
  <div class="login-container">
    <div class="left">
      <div class="title-box">
        <img src="@/assets/img/login_icon.png" alt="" />
        <span class="title">黑马妹妹</span>
        <span class="line"></span>
        <span class="sub-title">用户登录</span>
      </div>
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        class="demo-ruleForm el-form login-form"
      >
        <!-- 手机号 -->
        <!-- prop 表单校验/清空 用的 -->
        <el-form-item prop="phone">
          <el-input
            type="text"
            v-model="ruleForm.phone"
            placeholder="请输入手机号"
            prefix-icon="el-icon-user"
            status-icon
          ></el-input>
        </el-form-item>
        <!-- 密码 -->
        <el-form-item prop="password">
          <el-input
            type="password"
            v-model="ruleForm.password"
            placeholder="请输入密码"
            prefix-icon="el-icon-lock"
            status-icon
          ></el-input>
        </el-form-item>
        <!-- 验证码 -->
        <el-row>
          <el-col :span="16">
            <el-form-item prop="code">
              <el-input
                v-model="ruleForm.code"
                placeholder="请输入验证码"
                prefix-icon="el-icon-key"
                status-icon
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="7" style="margin-left: 10px">
            <img :src="loginCodeURL" alt="" style="width: 100%;height: 40px" @click="changeCodeURl">
          </el-col>
        </el-row>
        <!-- 勾选协议 -->
        <el-form-item prop="checked">
          <el-checkbox v-model="ruleForm.checked"></el-checkbox
          >&nbsp;&nbsp;我以阅读并同意
          <el-link href="http://www.itcast.cn" target="_blank" type="primary"
            >用户协议</el-link
          >
          和
          <el-link href="http://www.itcast.cn" target="_blank" type="primary"
            >隐私条款</el-link
          >
        </el-form-item>
        <!-- 登录  如果不需要校验/重置的话就不用prop-->
        <el-form-item>
          <el-button type="primary" style="width: 100%" @click="loginClick">登 录</el-button>
        </el-form-item>
        <!-- 注册 -->
        <el-form-item>
          <el-button type="primary" style="width: 100%" @click="registerClick">注 册</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="right">
      <img src="@/assets/img/login_bg.png" alt="" />
    </div>
    <!-- 注册子组件 -->
    <register ref="registerRef"></register>
  </div>
</template>

<script>
//按需导入token操作
import { setToken } from '@/utils/token.js'
//导入注册框子组件
import register from './register.vue'
export default {
  name: 'login',
  components: { //局部注册 只能在当前页面使用
    register
  },
  data() {
    return {
      loginCodeURL:`${process.env.VUE_APP_baseUrl}/captcha?type=login`,
      ruleForm: {
        phone: "18511111111", //手机号
        password: "12345678", //密码
        code: "", //验证码
        checked: false, //是否勾选
      },
      rules: {
        phone: [
          {
            validator: (rule, value, callback) => {
              //callback 是校验成功还是失败的 一定要调用
              if (!value) {
                return callback(new Error("手机号码不能为空"));
              }
              // 手机号码正则校验
              const reg = /^[1][3-9][0-9]{9}$/;
              if (!reg.test(value)) {
                return callback(new Error("手机号不合法"));
              }

              //成功了也要调用callback 但是不用传参
              callback();
            },
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "密码不能为空", trigger: "blur" },
        ],
        code: [{ required: true, message: "验证码不能为空", trigger: "blur" }],
        checked: [
          {
            validator: (rule, value, callback) => {
              value ? callback() : callback(new Error("必须勾选用户协议"));
            },
            trigger: "change",
          },
        ],
      },
    };
  },
  methods: {
    //点击图片刷新验证码
    changeCodeURl(){
      this.loginCodeURL = `${process.env.VUE_APP_baseUrl}/captcha?type=login&${new Date - 0}`
    },
    //登录
    loginClick(){
      this.$refs.ruleForm.validate(async vaild=>{
        // console.log(vaild);  //true/false
        if(!vaild) {
          return
        }
        //发送登录请求
/*         this.$axios.post('/login',this.ruleForm)
        .then(res=>{
          console.log(res); 

        })
*/
      const res = await this.$axios.post('/login',this.ruleForm)
      console.log(res);
      if(res.code === 200) {
        this.$message.success('登录成功');
        //保存token
        // localStorage.setItem('heimamm-token',res.data.token);
        setToken(res.data.token);
        //跳转到主页
        this.$router.push('/layout')
      }else {
        this.$message.error(res.msg);
        //重新获取验证码
        this.changeCodeURl();
      }
      })
    },
    //注册
    registerClick(){
      // console.log(this.$refs.registerRef); //可以拿到子组件的实例
      this.$refs.registerRef.dialogVisible = true;  //显示注册框
      //清空之前的信息和校验
      this.$refs.registerRef.$refs.form.resetFields();
    }
  },
};
</script>


<style lang="less">
.login-container {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
  background: linear-gradient(225deg, #1493fa, #01c6fa);
  .left {
    width: 478px;
    height: 550px;
    background: #f5f5f5;
    padding: 48px;
    .title-box {
      display: flex;
      align-items: center;
      img {
        width: 22px;
        height: 17px;
        margin-right: 16px;
      }
      .title {
        font-size: 24px;
        margin-right: 14px;
      }
      .line {
        width: 1px;
        background-color: #c7c7c7;
        height: 27px;
        margin-right: 12px;
      }
      .sub-title {
        font-size: 22px;
      }
    }
    .login-form {
      margin-top: 29px;
    }
  }
  .right {
    width: 633px;
    height: 435px;
    img {
      width: 100%;
      height: 100%;
    }
  }
}
</style>